<template>
	<view>
		<!-- 顶部 -->
		<u-sticky>
			<view class="topWrapper">
				<view class="searchBox">
					<view style="display: flex;" @tap="chooseCity">
						<text class="city">{{city}}</text>
						<u-icon name="arrow-down"></u-icon>
					</view>
					<view class="search">
						<u--input :value="inputValue" clearable border="none" fontSize="12" :placeholder="searchPlaceholder"
							@blur="isSearch = false" @focus="isSearch = true" @change="searchChange" />
					</view>
				</view>
			</view>
		</u-sticky>
		
		<!-- 网点选择 -->
		<view class="stationWrapper" v-if="inputValue.length == 0">
			<!-- 左边导航 -->
			<scroll-view scroll-y="true" class="left-wrapper" scroll-with-animation="true" :scroll-top="left_scroll">
				<view class="left-content">
					<view class="title-content" :class="{active: index === select_index}"
						v-for="(item, index) in stationList" :key="index" @tap="tabtap(index)">
						{{item.areaName}}
					</view>
				</view>
			</scroll-view>
			<!-- 右边内容 -->
			<scroll-view scroll-y="true" class="right-wrapper" :style="'height:'+windows_height+'px'"
				scroll-with-animation="true" :scroll-top="right_scroll" @scroll="myscroll">
				<view class="right-content">
					<view class="right-list"  v-for="item in stationList" :key="item.areaId">
						<text class="section-item">{{item.areaName}}</text>
						<view class="list-item" v-for="(service, index) in item.clientStoreListVo"
							:key="service.storeId" @tap="chooseStore(service)">
							<view>
								<text class="storeName">{{service.storeName}}</text>
								<text class="serviceMode" :class="{active : service.serviceMode == '自助取还'}"
									@click.stop="goStoreDetail(service.storeId)">{{service.serviceMode}}</text>
							</view>
							<text class="address">地址:{{service.addrDetail}}</text>
							<text class="time">服务时间:{{service.businessStartTime + '-' + service.businessEndTime}}</text>
							<view class="arrowWrapper" @click.stop="goStoreDetail(service.storeId)">
							 	<u-icon name="arrow-right"></u-icon>
							</view>
								
						</view>
					</view>
				</view>
			</scroll-view>
		</view>

		<!-- 网点搜索 -->
		<view class="searchStoreWrapper" v-if="inputValue.length > 0">
			<view class="list-item" v-for="service in searchStoreList" :key="service.storeId"
				@tap="chooseStore(service)">
				<view>
					<text class="storeName">{{service.storeName}}</text>
					<text class="serviceMode" :class="{active : service.serviceMode == '自助取还'}"
						@click.stop="goStoreDetail(service.storeId)">{{service.serviceMode}}</text>
				</view>
				<text class="address">地址:{{service.addrDetail}}</text>
				<text class="time">服务时间: {{service.businessStartTime + '-' + service.businessEndTime}}</text>
				<view class="arrowWrapper" @click.stop="goStoreDetail(service.storeId)">
				 	<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
		</view>


	</view>
</template>

<script>
	import settings from '@/settings.js'
	import {
		longClientStoreList,
		longSearchClientStoreList
	} from '@/api/longOrder-api.js'
	var QQMapWX = require('@/utils/qqmap-wx-jssdk.js');
	var qqmapsdk;
	export default {
		data() {
			return {
				searchPlaceholder: '输入地址搜索周边网点',
				inputValue: '',
				//二级联动相关变量
				windows_height: 0, //屏幕高度
				select_index: 0,
				right_height: [], //右侧每个内容的高度集合
				right_scroll: 0, //右侧的滑动值
				left_height: 0, //左侧总高度
				left_scroll: 0, //左侧滑动值
				last: 0,

				stationList: [], //网点选择数据
				searchStoreList: [], //网点搜索数据
			}
		},
		computed: {
			tenantId() {
				return this.$store.state.user.tenantId;
			},
			city() {
				return this.$store.state.user.lCityName;
			},
			cityId() {
				return this.$store.state.user.lCityId;
			},
		},
		onLoad(op) {
			this.type = op.type;
			this.getStoreList();

			//实例化api核心类
			qqmapsdk = new QQMapWX({
				key: settings.mapKey
			});
			//网点
			this.windows_height = Number(uni.getSystemInfoSync().windowHeight) - 44; //减去顶部固定的高度px
			setTimeout(() => {
				this.getHeightList();
			}, 1000);

			//城市切换的监听事件
			uni.$on('refreshCity', (item) => {
				this.getStoreList();
			});

		},
		methods: {
			//城市切换
			chooseCity() {
				uni.navigateTo({
					url: '../city/city'
				})
			},
			searchChange(value) {
				this.inputValue = value;
				longSearchClientStoreList({
					tenantId: this.tenantId,
					cityId: this.cityId,
					storeName: value,
					pageNo: 1,
					pageSize: 99
				}).then(res => {
					this.searchStoreList = res.data;
				})
			},

			//获取网点信息
			getStoreList() {
				longClientStoreList({
					tenantId: this.tenantId,
					cityId: this.cityId,
					pageNo: 1,
					pageSize: 99
				}).then(res => {
					this.stationList = res.data;
				})
			},

			//选择网点
			chooseStore(item) {
				console.log(item);
				this.$store.commit('order/savelStoreName', item.storeName);
				this.$store.commit('order/savelStoreId', item.storeId);
				uni.$emit('changeLongOrderStore')
				uni.navigateBack({

				})
			},

			goStoreDetail(storeId) {
				uni.navigateTo({
					url: '../station/station-detail?storeId=' + storeId
				})

			},

			//一级分栏点击
			tabtap(index) {
				this.select_index = index;
				this.setScrollH(index);

			},
			// 设置点击侧边栏右边滚动的高度
			setScrollH: function(index) {
				var that = this;
				let height = 0;
				var query = uni.createSelectorQuery();
				let serices = query.selectAll('.right-list');
				this.$nextTick(function() {
					serices.fields({
						size: true
					}, data => {
						if (index == 0) {
							that.right_scroll = 0;
						}
						for (let i = 0; i < index; i++) {
							height += parseInt(data[i].height);
							that.right_scroll = height;
						}
						// console.log(that.right_scroll)
					}).exec();
				})

			},
			getHeightList() {
				let _this = this;
				let selectorQuery = uni.createSelectorQuery();
				selectorQuery.select('.left-content').boundingClientRect(function(rects) {
					_this.left_height = rects.height;
				});
				selectorQuery.selectAll('.right-list').boundingClientRect(function(rects) {
					_this.right_height = rects.map((item) => item.top);
					// console.log('右侧item的top-----' + _this.right_height);
				}).exec();

			},
			myscroll(e) {
				//引入节流	
				let right_content_height = e.detail.scrollHeight - this.windows_height;
				if (right_content_height == e.detail.scrollTop) {
					return;
				}
				let scroll_top = e.detail.scrollTop + 110;
				//判断当前的scrollTop在哪个区间内;
				let now = +new Date();
				if (now - this.last > 100) {
					this.last = now;
					let active_index = this.right_height.findIndex((value, index, arr) => value <= scroll_top &&
						scroll_top < arr[index + 1]);
					this.select_index = active_index;
					if (this.left_height - this.windows_height) {
						//如果有超出部分
						let diff = this.left_height - this.windows_height
						this.left_scroll = Math.round((active_index * diff) / (this.stationList.length - 1))
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.topWrapper {
		padding: 10upx 0 0;
		background-color: $bg-white-color;
		.subsectionBox {
			padding: 20upx 20upx 0 20upx;
			background-color: $bg-white-color;
		}

		.searchBox {
				padding: 20upx;
				display: flex;
				align-items: center;
				background-color: $bg-white-color;
		
				.city {
					font-size: 30upx;
					font-weight: bold;
					color: $text-color-33;
				}
		
				.search {
					flex: 1;
					padding: 0 20upx;
					margin: 0 20upx;
					height: 60upx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 24upx;
					background-color: #ededed;
					border-radius: 8upx;
				}
		}
	}


	.poiWrap {
		margin-top: 10upx;
		background-color: $bg-white-color;
		.poiItem {
			padding: 30upx;
			border-bottom: 1px solid $liner-color;

			.itemInfo {
				background-color: $text-color-ff;
				font-size: 28upx;
				padding-top: 10upx;
			}
		}
	}
    
	.searchStoreWrapper {
		margin-top: 10upx;
	}
	
	.stationWrapper {
		display: flex;
		margin-top: 10upx;
		width: 100%;
	}

	.left-wrapper {
		flex-shrink: 0;
		width: 200upx;
		height: 100%;

		.left-content {
			.title-content {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 100%;
				height: 100upx;
				font-size: 28upx;
				color: 30upx;
				position: relative;

				&.active {
					color: $main-color;
					background: $bg-white-color;

					&:before {
						content: '';
						position: absolute;
						left: 0;
						top: 50%;
						transform: translateY(-50%);
						height: 36upx;
						width: 8upx;
						background-color: $main-color;
						border-radius: 0 4px 4px 0;
						opacity: .8;
					}
				}
			}
		}
	}

	.right-wrapper {
		flex: 1;

		.right-content {
			width: 100%;
			border-left: 1rpx solid $liner-color;
			box-sizing: border-box;

			.right-list {
				.section-item {
					height: 70upx;
					line-height: 70upx;
					text-align: center;
					padding: 20upx;
					color: $text-color-33;
					font-size: 30upx;
				}

			}
		}
	}

	.list-item {
		padding: 20upx;
		background-color: $bg-white-color;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		border-bottom: 1px solid $liner-color;
		position: relative;

		.storeName {
			font-size: 30upx;
			font-weight: bold;
			color: $text-color-33;
			overflow: hidden;
			text-align: left;
		}

		.serviceMode {
			position: relative;
			bottom: 5upx;
			margin-left: 10upx;
			font-size: 18upx;
			height: 34upx;
			line-height: 34upx;
			text-align: center;
			padding: 0 10upx;
			color: $text-color-ff;
			background-color: $main-color;

			&.active {
				background-color: $text-color-price;
			}
		}

		.address {
			margin: 12upx 0;
			font-size: 24upx;
			color: $text-color-99;
			overflow: hidden;
		}

		.time {
			font-size: 26upx;
			color: $text-color-99;

		}
		.arrowWrapper {
			padding: 20upx 0 20upx 20upx;
			position: absolute;
			top: 35%;
			right: 20upx;
		}
	}
</style>
